<template>
  <div class="wrapper"
       border-bottom-1px>
    <swiper :options="swiperOption"
            v-if="showSwiper">
      <!-- slides -->
      <swiper-slide v-for="(item, index) in list"
                    :key="index"
                    aspectratio
                    w-686-263>
        <img :src="item.album_picture"
             alt=""
             @load="loadDataed"
             aspectratio-content>
      </swiper-slide>
      <!-- Optional controls -->
      <div class="swiper-pagination"
           slot="pagination"></div>
    </swiper>
    <div class="shopName">
      <h2 class="title">{{name.name}}</h2>
      <div class="desc">{{name.title}}</div>
      <div class="icon-list">
        <div class="iconfont share"
             @click="handleShare">&#xe61a;</div>
        <div class="iconfont icon-heart collect"
             ref="icon"
             @click="handleChangeLike"></div>
      </div>
    </div>
    <div class="guide">
      <i class="iconfont icon">&#xe679;</i>
    </div>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex'
import { commonShare } from '@/assets/js/share'
export default {
  name: 'DetailSwiper',
  props: {
    list: {
      type: Array || Object
    },
    info: {
      type: Object
    },
    name: {
      type: Object
    },
    like: {
      type: Boolean
    }
  },
  data () {
    return {
      swiperOption: {
        pagination: '.swiper-pagination',
        loop: true,
        slidesPerView: 'auto',
        centeredSlides: true,
        spaceBetween: 8,
        autoplay: 3000
      },
      width: {
        width: '686px'
      }
    }
  },
  computed: {
    showSwiper () {
      return this.list.length
    },
    ...mapState(['collect'])
  },
  methods: {
    loadDataed () {
      this.$emit('load')
    },
    handleChangeLike () {
      this.$emit('like')
    },
    ...mapActions({
      ChangeCollectItem: 'ChangeCollectItem'
    }),
    likeStatus (flag) {
      if (flag) {
        this.$refs.icon.className = 'iconfont icon-heart-fill collect'
      } else {
        this.$refs.icon.className = 'iconfont icon-heart collect'
      }
    },
    addCollect () {
      const result = []
      if (this.info) {
        result.push(this.info)
      }
      return result
    },
    removeCollectItem () {
      this.collect.shift()
      return this.collect
    },
    handleShare () {
      const path = window.location.href
      this.$emit('isShare')
      commonShare(this.name.name, path, this.name.imgUrl, this.name.title)
    }
  },
  watch: {
    like (flag) {
      this.likeStatus(flag)
    }
  },
  mounted () {
    setTimeout(() => {
      this.likeStatus(this.like)
    }, 20)
  }
}
</script>

<style lang="stylus" scoped>
@import '~stylus/mixins.styl'
@import '~stylus/variable.styl'

.wrapper >>> .swiper-container
  height 263px
  width 100%
  margin-top 20px
  margin-bottom 20px

.wrapper >>> .swiper-container .swiper-slide
  width 686px
  border-radius 20px

.wrapper >>> ..swiper-container .swiper-wrapper .swiper-slide img
  width 686px
  height 263px

.wrapper, .wrapper >>> .swiper-pagination-bullet-active
  background $bgcWh

.wrapper
  width 100%
  overflow hidden
  margin-bottom 14px

  .shopName
    padding()
    padding-bottom 34px

    .title
      color $fzColor
      font-size $fzSecond
      line-height 56px
      ellipsis()

    .desc
      font-size $smallFz
      color $graySecond
      line-height 40px
      margin-bottom 24px

    .icon-list
      display flex
      justify-content flex-end

      .share, .collect
        font-size $largeFz

      .share
        color $navColor
        margin-right 26px

      .collect
        color #F44336
</style>
